import tpl from './index.tpl';
import './index.scss';
import tools from '../../utils/tools';

import {
  Logo
} from './logo';
import {
  Nav
} from './nav';
import {
  Search
} from './search';

class Header {
  constructor(el, fieldDatas, phoneDatas) {
    this.name = 'header';
    // $el -> jQuery对象
    // $el -> this.$app = $('<div id="app"></div>');
    this.$el = el;
    this.fieldDatas = fieldDatas;
    this.phoneDatas = phoneDatas;

    this.logo = new Logo();
    this.nav = new Nav();
    this.search = new Search();
  }

  async init() {
    await this.render();
    this.bindEvent();
  }

  async render() {
    /**
     console.log(this);
     * Header {
     *   name: 'header', 
     *   $el: S.fn.init(1), 
     *   fieldDatas: Array(10), 
     *   logo: Logo, 
     *   nav: Nav
     * }
     */

    await this.$el.append(tools.tplReplace(tpl(), {
      logo: this.logo.tpl(),
      nav: this.nav.tpl(this.fieldDatas),
      search: this.search.tpl()
    }));
  }

  bindEvent() {
    //鼠标移入标题导航栏移入移出菜单
    const $nav = $('.J_nav'),
      $searchBtn = $('.J_searchBtn');

    // console.log($nav);

    /**
     console.log(this.phoneDatas);
     * (21)[
     *   {
     *     buy_num_limit: "3",
     *     color: "[\"全息幻彩蓝\",\"深空灰\",\"全息幻彩紫\"]",
     *     default_price: "1999",
     *     field: "se",
     *     id: "1",
     *     most_value: "0",
     *     new: "1",
     *     phone_name: "小米9 SE",
     *     pics: "[{\"0\":[\"https://i8.mifile.cn/a1/pms_1550572195.46364290.jpg\",...],
     *     recom: "0",
     *     slogan: "「6GB+128GB，优惠300元，仅需1999元」索尼4800万超广角三摄 / 骁龙712全球首发 / 全息幻彩机身 /...],
     *     status: "1",
     *     version_info: "[{\"version\":\"6GB+128GB\",\"price\":\"1999\"},...]"
     *   },
     *   ...
     * ]
     */

    //on(事件类型，代理对象，{传值},处理函数)
    //传值：存入到e.data里面
    //$.proxy(this.nav.navMenuMouseIn,this)为改变this指向为实例对象的jQuery方法,this默认指向调用者$nav
    $nav.on('mouseenter', '.nav-item', {
      phoneDatas: this.phoneDatas,
      oNav: this.nav
    }, this.nav.navMenuMouseIn);

    $searchBtn.on('click', this.search.searchPhone);
  }

}




export {
  Header
};